<template>
    <div>
        <div class="app-title">
            <span>视频编辑器</span>
            <div class="progressContain">
                <div
                    class="progress"
                    :style="{ width: processData * 100 + '%' }"
                ></div>
            </div>
        </div>
        <div class="video-edit" v-loading="!ffmpegCoreLoaded">
            <div class="top">
                <!-- //上左-视频区域 -->
                <div class="top-left video">
                    <VideoComponent :obj="form"></VideoComponent>
                </div>

                <!-- //上右-功能区域 -->
                <div class="top-right control" style="overflow-x: hidden">
                    <ControlComponent :obj="form"></ControlComponent>
                </div>
            </div>
            <!-- //下-轨道区域 -->
            <div class="bottom tracks">
                <TimeTrack
                    :duration="form.videoList[form.videoSelected]?.duration"
                    :obj="form"
                ></TimeTrack>

                <div class="bottom-content">
                    <BottomItem
                        title="视频帧"
                        contentComponent="image"
                        :data="form.videoList[form.videoSelected]?.frameList"
                        :obj="form"
                        style="margin: 0 8px; margin-top: 8px"
                    >
                        <span style="margin: auto"
                            >请点击「视频取帧」按钮, 进行视频解帧</span
                        >
                    </BottomItem>

                    <BottomItem
                        title="贴图"
                        contentComponent="chartlet"
                        :data="form.imageList"
                        :obj="form"
                        style="margin: 0 8px; margin-top: 8px"
                        ><span style="margin: auto"
                            >请点击「上传贴图」按钮</span
                        ></BottomItem
                    >

                    <BottomItem
                        title="字幕"
                        contentComponent="text"
                        :data="form.subtitleList"
                        :obj="form"
                        style="margin: 0 8px; margin-top: 8px; height: 70px"
                    >
                        <span style="margin: auto">请点击「上传字幕」按钮</span>
                    </BottomItem>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import TimeTrack from "./bottom-tracks/TimeTrack.vue";
import BottomItem from "./BottomItem.vue";
import ControlComponent from "./ControlComponent.vue";
import VideoComponent from "./VideoComponent.vue";
import { mapState } from "vuex";
export default {
    components: {
        TimeTrack,
        BottomItem,
        ControlComponent,
        VideoComponent,
    },
    data() {
        return {
            form: {
                videoId: 0,
                /**视频列表 */
                videoList: [],
                /**当前选中的视频下标 */
                videoSelected: 0,
                /**字体列表 */
                fontList: [],
                /** 贴图列表  {url}*/
                imageList: [],
                /** 字幕文件列表 */
                subtitleList: [],
            },
        };
    },
    computed: {
        ...mapState({
            ffmpegCoreLoaded: (state) => state.app.ffmpegCoreLoaded,
            // videoList: (state) => state.app.videoList,
            // videoSelected: (state) => state.app.videoSelected,
            // imageList: (state) => state.app.imageList,
            // subtitleList: (state) => state.app.subtitleList,
            processData: (state) => state.app.processData,
        }),
    },
};
</script>


<style lang="less" scoped>
.video-edit {
    padding: 0 10px;
    height: calc(100% - 30px);
    display: flex;
    flex-direction: column;

    .top {
        display: flex;
        border: 0;
        margin: 0;
        padding: 0;
        height: 320px;

        > div {
            display: block;
            border: 1px solid #e8e1e1;
            margin: 10px;
            border-radius: 6px;
        }
    }

    .top-left,
    .top-right {
        flex: 1;
        min-width: 40vw;
        height: 300px;
        background-color: #fff;
        position: relative;
    }

    .bottom {
        flex: 1;
        flex-grow: 1;
        min-width: 80vw;
        border: 1px solid #e8e1e1;
        border-radius: 6px;
        margin: 10px;
        margin-bottom: 20px;
        margin-top: 50px;
        position: relative;
        padding: 10px 0;
        background-color: #fff;
    }

    .bottom-content {
        height: 100%;
        overflow-y: auto;
        overflow: hidden;
    }
}

.app-title {
    padding: 0 20px;
    margin-top: 6px;
    min-height: 30px;
    overflow: auto;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;

    span {
        background-size: auto 30px;
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: block;
        font-size: 22px;
        font-weight: 500;
        color: #333;
    }

    .progressContain {
        width: 500px;
        height: 6px;
        border-radius: 4px;
        border: 0.5px rgba(37, 122, 219, 0.621) solid;
        background-color: white;
        overflow: hidden;

        .progress {
            height: 100%;
            width: 0;
            background-color: rgb(37, 121, 219);
        }
    }
}
</style>
